<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>双良</title>
      <link rel="stylesheet" type="text/css" href="../../css/api.css" />
      <link rel="stylesheet" type="text/css" href="../../css/common.css" />
      <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    	<link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
      <link rel="stylesheet" type="text/css" href="../../css/index.css" />
      <style>
          html, body {width: 100%;min-height: 100%;background: #ffffff;}
          [v-cloak] {
              display: none;
          }
      </style>
  </head>
  <body>
<div id="app" >


  <header id="header_top" class="aui-bar aui-bar-nav aui-bar-light" style="">
      <div class="index_title clearfix">
      <a class="aui-pull-left">
          发车
      </a>

      <div class="aui-title">订单记录</div>
      <a class="aui-pull-right">
          定位查询
      </a>
      </div>
      <div class="aui-searchbar" id="search">
        <div class="aui-searchbar-input aui-border-radius" tapmode onclick="doSearch()">
            <i class="aui-iconfont aui-icon-search"></i>
            <form action="javascript:doSearch();">
                <input type="search" placeholder="搜索关键词" id="search-input">
            </form>
        </div>
        <!-- <div class="aui-searchbar-cancel" tapmod>取消</div> -->
      </div>
    <!--搜索-->

    <!--标签-->
    <div class="aui-tab index_tab" id="tab">
        <div class="aui-tab-item aui-active">全部</div>
        <div class="aui-tab-item"><div></div>待揽件</div>
        <div class="aui-tab-item">待支付</div>
        <div class="aui-tab-item">配送中</div>
        <div class="aui-tab-item">已完成</div>
    </div>

    <!--筛选-->

      <div class="aui-row-padded selectBtn index_select clearfix">
        <div class="aui-col-xs-4">区域 <span class="jiantou_top"></span></div>
        <div class="aui-col-xs-4">批次 <span class="jiantou_bottom"></div>
        <div class="aui-col-xs-4">日期 <span class="jiantou_bottom"></div>

      </div>
  </header>



</div>
  </body>
  <script type="text/javascript" src="../../script/api.js"></script>

  <script type="text/javascript" src="../../script/vue.min.js"></script>
  <script type="text/javascript" src="../../script/utils.js"></script>
  <script type="text/javascript" src="../../script/common.js"></script>
  <script type="text/javascript" src="../../script/aui-tab.js"></script>
  <script type="text/javascript" src="../../script/aui-scroll.js"></script>
  <script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
  <script type="text/javascript">



      apiready = function(){
        var header_top = $api.byId('header_top');
    		var header_topPos = $api.offset(header_top);
        $api.fixStatusBar(header_top);


        api.parseTapmode();
        openframeinstance('./list.html');

      };

      //刷新
      function setRefresh() {
          var pullRefresh = new auiPullToRefresh({
              container: document.querySelector('.aui-refresh-content'),
              triggerDistance: 100
          }, function(ret) {

              if (ret.status == "success") {
                  setTimeout(function() {
                      pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                  }, 1500)
              }
          })
      }

      function doSearch(){
          var searchValue = document.getElementById("search-input").value;
          if(searchValue){
              api.toast({
                  msg: searchValue,
                  duration: 2000,
                  location: 'bottom'
              });

          }
      }

      var tab = new auiTab({
        element:document.getElementById("tab"),
        // callback:function(o,dom){
        //     console.log(o);
        // }
      },function(ret){
          console.log(ret);
          // console.log(ret.index);
          switch(ret.index)
          {
            case 1:
              openframeinstance('./list.html','list');
              console.log(1);
              break;
            case 2:
              openframeinstance('./list1.html','list1');
              console.log(2);
              break;
            case 3:
              openframeinstance('./list2.html','list2');
              console.log(3);
              break;
            case 4:
              openframeinstance('./list3.html','list3');
              break;
            case 5:
              openframeinstance('./list4.html','list4');
              break;
            default:
              console.log('home')
              break;

          }
       });

      // 打开frame
      function openframeinstance( frame,names )
      {
          var header_top = $api.byId('header_top');
      		var header_topPos = $api.offset(header_top);
          $api.fixStatusBar(header_top);

          hideAllFrame();
          api.openFrame ({
            name: names,
            url: frame,
            rect:{
              x:0,
              y:header_topPos.h,
              w:'auto',
              h:api.frameHeight - header_topPos.h
            },
            pageParam: api.pageParam,
            bounces: false,
            delay:200
          });
      }


      function hideAllFrame()
      {
          api.setFrameAttr({
              name: 'list1',
              hidden:true
          });
          api.setFrameAttr({
              name: 'list2',
              hidden:true
          });
          api.setFrameAttr({
              name: 'list3',
              hidden:true
          });
          api.setFrameAttr({
              name: 'list4',
              hidden:true
          });

      }




  </script>
  </html>
